<template>
  <div class="guodu-container">
    <h1>Vue 过渡动画 - 综合演示</h1>
    
    <!-- 动画类型选择器 -->
    <div class="animation-selector">
      <h3>选择动画类型</h3>
      <div class="selector-grid">
        <button 
          v-for="type in animationTypes" 
          :key="type.name"
          @click="currentAnimation = type.name"
          :class="['animation-btn', { active: currentAnimation === type.name }]"
        >
          <span class="btn-icon">{{ type.icon }}</span>
          <span class="btn-text">{{ type.label }}</span>
        </button>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="control-panel">
      <div class="control-group">
        <label>动画时长：</label>
        <input type="range" v-model="duration" min="200" max="2000" step="100">
        <span>{{ duration }}ms</span>
      </div>
      
      <div class="control-group">
        <label>缓动函数：</label>
        <select v-model="easing">
          <option value="ease">ease</option>
          <option value="ease-in">ease-in</option>
          <option value="ease-out">ease-out</option>
          <option value="ease-in-out">ease-in-out</option>
          <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">弹性</option>
          <option value="cubic-bezier(0.25, 0.8, 0.25, 1)">平滑</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>
          <input type="checkbox" v-model="autoPlay">
          自动播放演示
        </label>
      </div>
      
      <div class="control-group">
        <button @click="playSequence" class="sequence-btn">
          播放动画序列
        </button>
      </div>
    </div>

    <!-- 单个元素演示区域 -->
    <div class="demo-section">
      <h3>{{ getCurrentAnimationLabel() }} - 单元素演示</h3>
      <div class="single-demo">
        <button @click="toggleSingle" class="toggle-btn">
          {{ showSingle ? '隐藏' : '显示' }} 元素
        </button>
        
        <div class="demo-container">
          <Transition 
            :name="currentAnimation" 
            :duration="duration"
            @before-enter="onBeforeEnter"
            @enter="onEnter"
            @leave="onLeave"
          >
            <div v-if="showSingle" :class="['demo-element', currentAnimation]">
              <div class="element-content">
                <h4>{{ getCurrentAnimationLabel() }}</h4>
                <p>{{ getAnimationDescription() }}</p>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>

    <!-- 多元素演示区域 -->
    <div class="demo-section">
      <h3>多元素组合演示</h3>
      <div class="multi-demo">
        <button @click="toggleMultiple" class="toggle-btn">
          {{ showMultiple ? '隐藏' : '显示' }} 所有元素
        </button>
        
        <div class="multi-container">
          <div v-for="(type, index) in animationTypes.slice(0, 6)" :key="type.name" class="multi-item">
            <h5>{{ type.label }}</h5>
            <div class="mini-demo-container">
              <Transition 
                :name="type.name" 
                :duration="duration"
                :style="{ transitionDelay: `${index * 100}ms` }"
              >
                <div v-if="showMultiple" :class="['mini-element', type.name]">
                  {{ type.icon }}
                </div>
              </Transition>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 列表动画演示 -->
    <div class="demo-section">
      <h3>列表过渡动画</h3>
      <div class="list-demo">
        <div class="list-controls">
          <button @click="addListItem" class="list-btn add">添加项目</button>
          <button @click="removeListItem" class="list-btn remove">删除项目</button>
          <button @click="shuffleList" class="list-btn shuffle">随机排序</button>
          <button @click="clearList" class="list-btn clear">清空列表</button>
        </div>
        
        <div class="list-container">
          <TransitionGroup 
            name="list" 
            tag="div" 
            class="list-wrapper"
            :duration="duration"
          >
            <div
              v-for="(item, index) in listItems"
              :key="item.id"
              :class="['list-item', `item-${index % 4}`]"
              @click="removeSpecificItem(item.id)"
            >
              <span class="item-number">{{ index + 1 }}</span>
              <span class="item-text">{{ item.text }}</span>
              <span class="item-remove">×</span>
            </div>
          </TransitionGroup>
        </div>
      </div>
    </div>

    <!-- 复杂动画组合演示 -->
    <div class="demo-section">
      <h3>复杂动画组合</h3>
      <div class="complex-demo">
        <button @click="playComplexAnimation" class="complex-btn">
          播放复杂动画序列
        </button>
        
        <div class="complex-container">
          <!-- 粒子效果 -->
          <div class="particles">
            <div 
              v-for="(particle, index) in particles" 
              :key="`particle-${index}`"
              :class="['particle', { active: particle.active }]"
              :style="getParticleStyle(particle, index)"
            ></div>
          </div>
          
          <!-- 中心元素 -->
          <Transition name="complex-center" :duration="1000">
            <div v-if="showComplexCenter" class="complex-center">
              <div class="center-content">
                <div class="rotating-ring"></div>
                <div class="pulsing-core"></div>
                <div class="floating-text">Vue Transitions</div>
              </div>
            </div>
          </Transition>
          
          <!-- 环绕元素 -->
          <div class="orbit-container">
            <div 
              v-for="(orbit, index) in orbitElements" 
              :key="`orbit-${index}`"
              :class="['orbit-element', { active: orbit.active }]"
              :style="getOrbitStyle(orbit, index)"
            >
              {{ orbit.icon }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 动画状态显示 -->
    <div class="status-panel">
      <h3>动画状态</h3>
      <div class="status-grid">
        <div class="status-item">
          <span class="label">当前动画：</span>
          <span class="value">{{ getCurrentAnimationLabel() }}</span>
        </div>
        <div class="status-item">
          <span class="label">动画时长：</span>
          <span class="value">{{ duration }}ms</span>
        </div>
        <div class="status-item">
          <span class="label">缓动函数：</span>
          <span class="value">{{ easing }}</span>
        </div>
        <div class="status-item">
          <span class="label">自动播放：</span>
          <span class="value">{{ autoPlay ? '开启' : '关闭' }}</span>
        </div>
      </div>
    </div>

    <!-- 代码示例 -->
    <div class="code-section">
      <h3>当前动画代码示例</h3>
      <pre><code>{{ getCodeExample() }}</code></pre>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'

export default {
  name: 'GuoDu',
  setup() {
    // 响应式数据
    const currentAnimation = ref('fade')
    const duration = ref(500)
    const easing = ref('cubic-bezier(0.25, 0.8, 0.25, 1)')
    const autoPlay = ref(false)
    const showSingle = ref(true)
    const showMultiple = ref(true)
    const showComplexCenter = ref(false)
    
    // 动画类型定义
    const animationTypes = [
      { name: 'fade', label: '淡入淡出', icon: '🌟', description: '通过透明度变化实现的平滑过渡效果' },
      { name: 'slide-left', label: '左滑动', icon: '⬅️', description: '从左侧滑入滑出的动画效果' },
      { name: 'slide-right', label: '右滑动', icon: '➡️', description: '从右侧滑入滑出的动画效果' },
      { name: 'slide-up', label: '上滑动', icon: '⬆️', description: '从上方滑入滑出的动画效果' },
      { name: 'slide-down', label: '下滑动', icon: '⬇️', description: '从下方滑入滑出的动画效果' },
      { name: 'scale', label: '缩放', icon: '🔍', description: '通过缩放变换实现的动画效果' },
      { name: 'rotate', label: '旋转', icon: '🔄', description: '通过旋转变换实现的动画效果' },
      { name: 'flip', label: '翻转', icon: '🔃', description: '3D翻转效果的动画' },
      { name: 'bounce', label: '弹跳', icon: '⚡', description: '带有弹性效果的动画' },
      { name: 'zoom', label: '缩放淡入', icon: '💫', description: '结合缩放和透明度的复合动画' }
    ]
    
    // 列表数据
    const listItems = ref([
      { id: 1, text: '列表项目 1' },
      { id: 2, text: '列表项目 2' },
      { id: 3, text: '列表项目 3' }
    ])
    const nextId = ref(4)
    
    // 复杂动画数据
    const particles = ref([])
    const orbitElements = ref([])
    
    // 自动播放定时器
    let autoPlayTimer = null
    let sequenceTimer = null
    
    // 计算属性
    const getCurrentAnimationLabel = () => {
      const type = animationTypes.find(t => t.name === currentAnimation.value)
      return type ? type.label : '未知动画'
    }
    
    const getAnimationDescription = () => {
      const type = animationTypes.find(t => t.name === currentAnimation.value)
      return type ? type.description : ''
    }
    
    // CSS v-bind 计算属性
    const durationMs = computed(() => `${duration.value}ms`)
    const easingValue = computed(() => easing.value)
    
    // 方法
    const toggleSingle = () => {
      showSingle.value = !showSingle.value
    }
    
    const toggleMultiple = () => {
      showMultiple.value = !showMultiple.value
    }
    
    const addListItem = () => {
      listItems.value.push({
        id: nextId.value++,
        text: `新项目 ${nextId.value - 1}`
      })
    }
    
    const removeListItem = () => {
      if (listItems.value.length > 0) {
        const randomIndex = Math.floor(Math.random() * listItems.value.length)
        listItems.value.splice(randomIndex, 1)
      }
    }
    
    const removeSpecificItem = (id) => {
      const index = listItems.value.findIndex(item => item.id === id)
      if (index > -1) {
        listItems.value.splice(index, 1)
      }
    }
    
    const shuffleList = () => {
      for (let i = listItems.value.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [listItems.value[i], listItems.value[j]] = [listItems.value[j], listItems.value[i]]
      }
    }
    
    const clearList = () => {
      listItems.value = []
    }
    
    const playSequence = async () => {
      for (let i = 0; i < animationTypes.length; i++) {
        currentAnimation.value = animationTypes[i].name
        showSingle.value = false
        await new Promise(resolve => setTimeout(resolve, 200))
        showSingle.value = true
        await new Promise(resolve => setTimeout(resolve, duration.value + 300))
      }
    }
    
    const initParticles = () => {
      particles.value = Array.from({ length: 20 }, (_, i) => ({
        id: i,
        active: false,
        x: Math.random() * 100,
        y: Math.random() * 100,
        delay: i * 50
      }))
    }
    
    const initOrbitElements = () => {
      const icons = ['🌟', '⭐', '✨', '💫', '🌙', '☀️']
      orbitElements.value = Array.from({ length: 6 }, (_, i) => ({
        id: i,
        active: false,
        icon: icons[i],
        angle: (i * 60) * (Math.PI / 180),
        radius: 120
      }))
    }
    
    const playComplexAnimation = async () => {
      // 重置状态
      showComplexCenter.value = false
      particles.value.forEach(p => p.active = false)
      orbitElements.value.forEach(o => o.active = false)
      
      await new Promise(resolve => setTimeout(resolve, 100))
      
      // 激活粒子
      for (let i = 0; i < particles.value.length; i++) {
        setTimeout(() => {
          particles.value[i].active = true
        }, i * 50)
      }
      
      // 显示中心元素
      setTimeout(() => {
        showComplexCenter.value = true
      }, 500)
      
      // 激活轨道元素
      setTimeout(() => {
        orbitElements.value.forEach((orbit, i) => {
          setTimeout(() => {
            orbit.active = true
          }, i * 100)
        })
      }, 1000)
    }
    
    const getParticleStyle = (particle, index) => {
      return {
        left: `${particle.x}%`,
        top: `${particle.y}%`,
        animationDelay: `${particle.delay}ms`
      }
    }
    
    const getOrbitStyle = (orbit, index) => {
      const x = 50 + Math.cos(orbit.angle) * (orbit.radius / 4)
      const y = 50 + Math.sin(orbit.angle) * (orbit.radius / 4)
      return {
        left: `${x}%`,
        top: `${y}%`,
        animationDelay: `${index * 100}ms`
      }
    }
    
    const getCodeExample = () => {
      return `<template>
  <Transition name="${currentAnimation.value}" :duration="${duration.value}">
    <div v-if="show" class="element">
      内容
    </div>
  </Transition>
</template>

`
    }
    
    // 生命周期钩子
    onMounted(() => {
      initParticles()
      initOrbitElements()
      
      // 自动播放逻辑
      const startAutoPlay = () => {
        if (autoPlay.value) {
          autoPlayTimer = setInterval(() => {
            const currentIndex = animationTypes.findIndex(t => t.name === currentAnimation.value)
            const nextIndex = (currentIndex + 1) % animationTypes.length
            currentAnimation.value = animationTypes[nextIndex].name
            
            showSingle.value = false
            setTimeout(() => {
              showSingle.value = true
            }, 200)
          }, duration.value + 1000)
        }
      }
      
      // 监听自动播放状态变化
      const stopAutoPlay = () => {
        if (autoPlayTimer) {
          clearInterval(autoPlayTimer)
          autoPlayTimer = null
        }
      }
      
      // 设置监听器
      const unwatch = computed(() => autoPlay.value).effect = (newVal) => {
        if (newVal) {
          startAutoPlay()
        } else {
          stopAutoPlay()
        }
      }
    })
    
    onUnmounted(() => {
      if (autoPlayTimer) clearInterval(autoPlayTimer)
      if (sequenceTimer) clearInterval(sequenceTimer)
    })
    
    // 过渡钩子
    const onBeforeEnter = (el) => {
      console.log('动画开始前:', currentAnimation.value)
    }
    
    const onEnter = (el, done) => {
      console.log('动画进入中:', currentAnimation.value)
      done()
    }
    
    const onLeave = (el, done) => {
      console.log('动画离开中:', currentAnimation.value)
      done()
    }
    
    return {
      // 响应式数据
      currentAnimation,
      duration,
      easing,
      autoPlay,
      showSingle,
      showMultiple,
      showComplexCenter,
      animationTypes,
      listItems,
      nextId,
      particles,
      orbitElements,
      
      // 计算属性
      durationMs,
      easingValue,
      
      // 方法
      getCurrentAnimationLabel,
      getAnimationDescription,
      toggleSingle,
      toggleMultiple,
      addListItem,
      removeListItem,
      removeSpecificItem,
      shuffleList,
      clearList,
      playSequence,
      playComplexAnimation,
      getParticleStyle,
      getOrbitStyle,
      getCodeExample,
      onBeforeEnter,
      onEnter,
      onLeave
    }
  }
}
</script>

<style>
/* 过渡动画定义 - 全局样式 */
/* 淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 滑动动画 */
.slide-left-enter-active, .slide-left-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.slide-left-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translateX(100px);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(-100px);
}
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.slide-down-enter-from {
  opacity: 0;
  transform: translateY(100px);
}
.slide-down-leave-to {
  opacity: 0;
  transform: translateY(100px);
}

/* 缩放动画 */
.scale-enter-active, .scale-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.scale-enter-from {
  opacity: 0;
  transform: scale(0);
}
.scale-leave-to {
  opacity: 0;
  transform: scale(0);
}

/* 旋转动画 */
.rotate-enter-active, .rotate-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.rotate-enter-from {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}
.rotate-leave-to {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

/* 翻转动画 */
.flip-enter-active, .flip-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.flip-enter-from {
  opacity: 0;
  transform: rotateY(90deg);
}
.flip-leave-to {
  opacity: 0;
  transform: rotateY(-90deg);
}

/* 弹跳动画 */
.bounce-enter-active, .bounce-leave-active {
  transition: all v-bind(durationMs) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-enter-from {
  opacity: 0;
  transform: translateY(-50px) scale(0.5);
}
.bounce-leave-to {
  opacity: 0;
  transform: translateY(50px) scale(0.5);
}

/* 缩放淡入 */
.zoom-enter-active, .zoom-leave-active {
  transition: all v-bind(durationMs) v-bind(easingValue);
}
.zoom-enter-from {
  opacity: 0;
  transform: scale(1.5);
}
.zoom-leave-to {
  opacity: 0;
  transform: scale(1.5);
}

/* 列表动画 */
.list-enter-active, .list-leave-active {
  transition: all v-bind(durationMs) ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
.list-move {
  transition: transform v-bind(durationMs) ease;
}

/* 复杂动画 */
.complex-center-enter-active, .complex-center-leave-active {
  transition: all 1s ease;
}
.complex-center-enter-from {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(180deg);
}
.complex-center-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(-180deg);
}
</style>

<style scoped>
.guodu-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 3em;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 动画选择器 */
.animation-selector {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.animation-selector h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.animation-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.animation-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border-color: #667eea;
}

.animation-btn.active {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.btn-text {
  font-weight: 600;
}

/* 控制面板 */
.control-panel {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-group label {
  font-weight: 600;
  color: #34495e;
  font-size: 14px;
}

.control-group select,
.control-group input[type="range"] {
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.control-group select:focus,
.control-group input[type="range"]:focus {
  outline: none;
  border-color: #667eea;
}

.sequence-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sequence-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 演示区域 */
.demo-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.demo-section h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.8em;
  border-bottom: 3px solid #667eea;
  padding-bottom: 10px;
}

.toggle-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: 25px;
}

.toggle-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 单元素演示 */
.demo-container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed #ddd;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

.demo-element {
  width: 300px;
  height: 150px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.element-content {
  text-align: center;
}

.element-content h4 {
  margin: 0 0 10px 0;
  font-size: 1.5em;
}

.element-content p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 多元素演示 */
.multi-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.multi-item h5 {
  text-align: center;
  color: #34495e;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.mini-demo-container {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  border-radius: 10px;
  background: #f8f9fa;
}

.mini-element {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  background: linear-gradient(45deg, #f093fb, #f5576c);
}

/* 列表演示 */
.list-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.list-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.list-btn.add { background: #4CAF50; color: white; }
.list-btn.remove { background: #f44336; color: white; }
.list-btn.shuffle { background: #ff9800; color: white; }
.list-btn.clear { background: #9e9e9e; color: white; }

.list-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.list-item.item-0 { background: linear-gradient(45deg, #667eea, #764ba2); }
.list-item.item-1 { background: linear-gradient(45deg, #f093fb, #f5576c); }
.list-item.item-2 { background: linear-gradient(45deg, #4facfe, #00f2fe); }
.list-item.item-3 { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.item-number {
  background: rgba(255,255,255,0.2);
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: bold;
  margin-right: 15px;
  color: white;
}

.item-text {
  flex: 1;
  color: white;
  font-weight: 500;
}

.item-remove {
  color: white;
  font-size: 20px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.item-remove:hover {
  opacity: 1;
}

/* 复杂动画演示 */
.complex-btn {
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
  background-size: 200% 200%;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: 30px;
  animation: gradientShift 3s ease infinite;
}

.complex-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.complex-container {
  position: relative;
  height: 400px;
  border: 3px dashed #ddd;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at center, #667eea, #764ba2);
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.6s ease;
}

.particle.active {
  opacity: 1;
  animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.complex-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
}

.center-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.rotating-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid rgba(255,255,255,0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

.pulsing-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.floating-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #667eea;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  animation: textFloat 2s ease-in-out infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes textFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(-5px); }
}

.orbit-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.orbit-element {
  position: absolute;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.6s ease;
}

.orbit-element.active {
  transform: translate(-50%, -50%) scale(1);
  animation: orbitFloat 4s ease-in-out infinite;
}

@keyframes orbitFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(1.1) rotate(180deg); }
}

/* 状态面板 */
.status-panel {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.status-panel h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 2px solid #eee;
}

.status-item .label {
  font-weight: 600;
  color: #34495e;
}

.status-item .value {
  color: #667eea;
  font-weight: 500;
}

/* 代码示例 */
.code-section {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.code-section h3 {
  color: #ecf0f1;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.code-section pre {
  background: #34495e;
  padding: 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
}


</style>